<template>
    <div class="catalog" style="height:100%">
        <navbar :title="title" :showBackButton="false" :showLeftArrow="false">
            <template #left>
                <span @click="$router.back(-1)" class="icon1 iconfont icon-more"></span>
                <span class="icon1 iconfont icon-liebiao" v-if="catalogList.length>0" @click="showCatalog = !showCatalog"></span>
            </template>
            <template #right>
                <div slot="right" class="head-right icon iconfont icon-sousuo"></div>
            </template>
        </navbar>
        <div class="content" style="padding: 54px 0 15px;">
            <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                <van-list
                v-model="isLoading"
                :finished="finished"
                :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                loding-text="loading"
                @load="getList"
                >
                    <course-list-item :list="freshCourseList" v-if="freshCourseList.length>0"></course-list-item>
                    <!--暂无数据-->
                    <div v-if="!isLoading && total === 0" style="height:100%;">
                        <div class="box-table" style="width:100%;height:100%;">
                            <div class="box-table-cell" style="text-align: center;">
                                <div class="no-data">
                                    <img src="../../../../static/images/no-data.png" alt=""/>
                                    <p class="color999">{{ $t("no_data") }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <common-loading :isLoading="isLoading"></common-loading>
                </van-list>
            </van-pull-refresh>
        </div>
        <!-- 目录弹出层 -->
        <div class="modal" v-if="showCatalog" @click="showCatalog = false">
            <div @click.stop="showCatalog = true" style="height:70%">
                <catalog :catalogList="catalogList" :activeFId="activeFId" :activeCId="activeCId" @goDetail="upDataList" :lookAll="lookAll"></catalog>
            </div>
        </div>
    </div>
</template>

<script>
import courseListItem from './courseListItem.vue';
import CommonLoading from '@/components/common/loading';
import { Icon } from 'vant';
import catalog from './catalog';
export default {
    name: 'catalogDetail',
    data() {
        return {
            type: 0, // 默认课程为0, 考试为2
            title: this.$route.query.title,
            tndId: Number(this.$route.query.id), // 目录id
            activeFId: Number(this.$route.query.fid),
            activeCId: Number(this.$route.query.id),
            isLoading: false,
            total: 0, // 总数
            freshCourseList: [], // 上拉加载新数据
            showCatalog: false,
            activeCatalog: 0,
            maxPageNo: 0, // 最大页数 优化之前无限下拉加载发送请求问题
            pageNo: 1,
            catalogList: [],
            lookAll: this.$t('look_all_course'),
            finished: false,
            isRefresh: false
        };
    },
    components: {
        CommonLoading,
        courseListItem,
        [Icon.name]: Icon,
        catalog
    },
    methods: {
        /**
         * 获取列表
         * */
        getList(option) {
            this.isLoading = true;
            this.$axios({
                method: 'POST',
                url: `/app/api/trainee/course/center/list`,
                params: {
                    pageNo: this.pageNo,
                    pageSize: 10
                },
                data: {
                    isExamInd: this.type === 2,
                    isMobileInd: true,
                    order: 'time',
                    sort: 'RISE',
                    tndId: this.tndId
                }
            }).then(res => {
                if (res && res.status === 200) {
                    if (option && option === 'refresh') {
                        this.freshCourseList = res.data.results;
                    } else {
                        this.freshCourseList = this.freshCourseList.concat(res.data.results);
                    }
                }
                this.maxPageNo = res.data.totalPage;
                this.total = res.data.totalRecord;
                this.isLoading = false;
                this.pageNo++;
                if (this.freshCourseList.length >= this.total) {
                    this.finished = true;
                }
            });
        },
        /**
         * 更新数据
         * */
        upDataList(item, fid) {
            this.tndId = item.id;
            this.activeFId = fid;
            this.activeCId = item.id;
            this.title = item.name;
            this.pageNo = 1;
            this.getList('refresh');
            this.showCatalog = false;
        },
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.getList('refresh');
                this.isRefresh = false;
            }, 900);
        }
    },
    mounted() {
        this.catalogList = JSON.parse(sessionStorage.getItem('catalog'));
        if (Number(this.$route.query.type) === 2) {
            this.type = Number(this.$route.query.type);
            this.lookAll = this.$t('look_all_exam');
        }
        this.getList('refresh');
    }
};
</script>

<style scoped lang="less">
.catalog{
    .header-box{
        /deep/.head-left{
            width: auto;
            padding: 0 5px;
        }
        .icon, .icon1{
            display: inline-block;
            width: 56px;
            height: 56px;
            text-align: center;
            color: #666;
        }
        .icon1{
            width: 30px;
        }
        /deep/.van-tab{
            transform: translateZ(0);
            font-size: 15px;
        }
        /deep/.van-tabs--line .van-tabs__wrap{
            height: 55px;
        }
    }
}
.modal{
    position: fixed;
    top:56px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    font-size: 12px;
}
/deep/.vue-scroll>div {
    height: 100%;
}
</style>
